<template>
  <div >
    <div>
      <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="菜品图片" >
            <el-upload
              class="upload-demo"
              ref="upload"
              action=""
              :with-credentials="true"
              :http-request="httpRequest"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="photo"
              list-type="picture"
              :auto-upload="false">
              <el-button size="small" type="primary" >点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="产品名称">
            <el-input v-model="form.dishName"></el-input>
          </el-form-item>
          <el-form-item label="产品类型" prop="type">
            <el-select v-model="form.dishType" placeholder="请选择菜品类型" style="width: 100%">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品价格">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getContent">确认修改</el-button>
          </el-form-item>

        </el-form>
      </div>


      <!--        <button size="primary" type="info" icon="plus" @click="getContent">获取内容</button>-->
    </div>
  </div>
</template>

<script>

  import axios from 'axios';
  import {requestGet, requestPost} from "../../../../network/request";
  export default{
    name: 'hello',
    props:['id'],
    data(){
      return {
        id:'',
        image: undefined,
        url: '',
        photo: [],
        form: {
          image:'',
          dishName: '',
          price: '',
          dishType: '',
        },
        types: [{
          value: 'STAPLE',
          label: '主食',
        }, {
          value: 'VEGETABLE',
          label: '素食'
        }, {
          value: 'MEAT',
          label: '荤食'
        },
          {
            value: 'DRINKS',
            label: '饮品'
          }],

        addFormVisible: false
      }
    },
    mounted() {
      // const _this=this;
      //请求该菜
      // requestPost({
      //   url: 'dish/selectImg',
      //   data: {
      //     dishId: this.id
      //   }
      // }).then(res=>{
      //   this.photo.push({name: '产品预览图', url: res.data.url});
      //   this.url = res.data.url;
      // });
      requestPost({
        url: 'dish/search',
        data: {
          dishId: this.id
        }
      }).then(res=>{
        this.form = res.data.dish;
        this.photo.push({name: '菜品预览图', url: res.data.dish.image});
        this.url = res.data.dish.image;
      })
    },
    methods: {
      // param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
      httpRequest(param) {
        this.image= param.file; // 相当于input里取得的files

      },

      //上传成功后显示图片
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      //获取文档内容 上传产品信息 图片在上面的action里面提交
      getContent: function(){
        this.$refs.upload.submit();
        let fd = new FormData();// FormData 对象
        fd.append('dishId',this.id);
        fd.append('img', this.image);// 文件对象
        fd.append('dishName',this.form.dishName);
        fd.append('dishType',this.form.dishType);
        fd.append('image',this.url);
        fd.append('price',this.form.price);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        let url = 'http://localhost:8080/dish/update'
        axios.post(url, fd, config).then(res=>{
          if(res.code===0){
            this.submitForm();//提交表单
          }
        }).then(res=>{
          alert("修改成功");
          this.$router.replace("/content/product");
        });

      },


    }
  }

</script>
<style>
  .form{
    text-align: center;
    margin: 0 auto;
  }
</style>
